<template>
	<view class="container">
		<view class="user-info">
			<view class="avatar-container" @click="chooseAndUploadAvatar">
				<image class="avatar" :src="form.avatar ? 'http://localhost/dev-api' + form.avatar : '/static/images/profile.jpg'" mode="aspectFill"></image>
				<text class="edit-text">点击修改头像</text>
			</view>
			
			<uni-forms ref="form" :model="form" :rules="rules">
				<uni-forms-item label="昵称" name="nickName">
					<uni-easyinput v-model="form.nickName" placeholder="请输入昵称" />
				</uni-forms-item>
				
				<uni-forms-item label="手机号码" name="phonenumber">
					<uni-easyinput v-model="form.phonenumber" placeholder="请输入手机号码" />
				</uni-forms-item>
				
				<uni-forms-item label="性别" name="sex">
					<uni-data-checkbox
						v-model="form.sex"
						:localdata="[
							{text: '男', value: '0'},
							{text: '女', value: '1'}
						]"
					/>
				</uni-forms-item>
				
				<uni-forms-item label="个性签名" name="signature">
					<uni-easyinput type="textarea" v-model="form.signature" placeholder="请输入个性签名" />
				</uni-forms-item>
			</uni-forms>
			
			<view class="button-group">
				<button class="submit-btn" type="primary" @click="submitForm">保存</button>
			</view>
		</view>
	</view>
</template>

<style>
.container {
	padding: 20rpx;
}

.user-info {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
}

.avatar-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30rpx;
}

.avatar {
	width: 150rpx;
	height: 150rpx;
	border-radius: 75rpx;
	margin-bottom: 10rpx;
}

.edit-text {
	font-size: 24rpx;
	color: #666;
}

.button-group {
	margin-top: 50rpx;
}

.submit-btn {
	width: 100%;
}
</style>

<script>
	export default {
		data() {
			return {
				form: {
					avatar: '',
					nickName: '',
					phonenumber: '',
					sex: '0',
					signature: ''
				},
				rules: {
					nickName: {
						rules: [{
							required: true,
							errorMessage: '请输入昵称'
						}]
					},
					phonenumber: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码'
						}, {
							pattern: /^1[3-9]\d{9}$/,
							errorMessage: '手机号码格式不正确'
						}]
					},
					sex: {
						rules: [{
							required: true,
							errorMessage: '请选择性别'
						}]
					}
				}
			}
		},
		onLoad() {
			// 初始化表单数据
			this.initFormData()
			// 监听裁剪完成事件
			uni.$on('cropperComplete', this.onCropperComplete)
		},
		onUnload() {
			// 移除裁剪完成事件监听
			uni.$off('cropperComplete', this.onCropperComplete)
		},
		methods: {
			// 初始化表单数据
			initFormData() {
				const userInfo = uni.getStorageSync('userInfo')
				this.form = {
					...this.form,
					...userInfo
				}
				// 强制更新视图
				this.$forceUpdate()
			},
			// 选择头像
			chooseAndUploadAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 跳转到裁剪页面
						uni.navigateTo({
							url: `/pages/common/cropper/cropper?src=${encodeURIComponent(res.tempFilePaths[0])}&width=200&height=200&fixed=true`
						})
					}
				})
			},
			// 监听裁剪完成事件
			onCropperComplete(imgUrl) {
				this.form.avatar = imgUrl
				// 强制更新视图
				this.$forceUpdate()
			},
			// 提交表单
			submitForm() {
				this.$refs.form.validate().then(res => {
					// 显示加载提示
					uni.showLoading({
						title: '保存中...',
						mask: true
					})
					
					// 发送更新请求
					uni.request({
						url: 'http://localhost/dev-api/system/user/profile',
						method: 'PUT',
						header: {
							'Authorization': uni.getStorageSync('token'),
							'Content-Type': 'application/json'
						},
						data: {
							nickName: this.form.nickName,
							phonenumber: this.form.phonenumber,
							sex: this.form.sex,
							signature: this.form.signature
						},
						success: (res) => {
							if (res.data.code === 200) {
								// 更新本地存储
								const userInfo = uni.getStorageSync('userInfo')
								const newUserInfo = {
									...userInfo,
									...this.form
								}
								uni.setStorageSync('userInfo', newUserInfo)
								// 发送更新事件
								uni.$emit('updateUserInfo', newUserInfo)
								
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							} else {
								uni.showToast({
									title: res.data.msg || '保存失败',
									icon: 'none'
								})
							}
						},
						fail: (err) => {
							console.error('保存失败:', err)
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				}).catch(err => {
					console.log('表单错误：', err)
				})
			}
		}
	}
</script> 